Add the stack block variation to the group block #39690
Conversation
youknowriad
added
[Type] Enhancement
|
Size Change: -290 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Thanks for exploring this idea @youknowriad!
close #39651
It looks like that issue was more about the "Allow to wrap to multiple lines" toggle, I wasn't too sure of the connection between adding in the new variation (apologies if I'm missing context, there!)
I'm wondering if there isn't quite enough difference between the Group and Stack variations. As a user how would I know that Group and Stack do quite different things (one being block / margin based, the other being vertically oriented flex?):
Perhaps that's a matter for the description / icons, like you mention. It'd be great to have separate icons to make the differentiation clearer. Are there other features that the Stack variation can include that would help to hone in on that difference? (Separate icons would help for if we want to surface more kinds of "group as" controls in the multi-select toolbar, too, e.g. #34461).
One way to look at it, is if as a user, you're going to create a container block from scratch and go to pick one of these variations, which would you reach for and why?
For a user who switches to the vertical orientation, it involves a couple of limitations that we don't have in the group block:
- If you're currently on a Row block and switch to the vertical orientation, then we no longer have access to left / right alignments on images (since they rely on floats), and paragraph blocks can no longer be individually aligned, either, it seems.
- You can no longer set content / wide width, have access to wide / full alignment
I noticed a couple of other little things we'd probably want to tweak, too, if we proceed with this variation. The "Allow to wrap to multiple lines" toggle doesn't appear to do anything in a vertical orientation, and clicking to select paragraphs within the block seems to be a bit unreliable:
Thanks for digging in, though — I think looking at variations, and switching between them will help open up a bit more of our thinking surrounding the flexibility of changing between different kinds of layouts 👍
|
Indeed, the issue is unrelated, I misread it originally, sorry about that :) I'll look at some of the other points. |
|
Nice. I'm exploring some new icons for row and stack in #39710 (comment) as well! |
|
@jasmussen Let me know when you have the SVGs so I can add them here. |
|
I have them now, and you can add them only on the condition that if we change our minds on the visuals, we can update them 😛 (I like the icons as they are, but they are hot off the press and still a work in progress!) Row: Stack (the block): I noticed, by the way, that there's already a |
|
Changing icons designs is always possible :) |
|
How do you think we should name these? (especially due to the stack conflict) |
If I could have my way, I'd rename the existing stack to "multiple" or something like it 🤔 — row, group and stack and ungroup feel like good generic names for the 3 blocks, IMO. |
|
ok 👍 |
|
I'm not totally sure on "multiple" though. "selection"? |
|
It looks more like "copy" to me :P |
|
Oh I guess that's right, and I guess we'd use that same one if we ever needed cut/copy/paste icons 🤔 We don't prefix or suffix
Edit, and by "fix" I mean probably rename the icons in Figma to match what's shipping. |
We don't, we can also fix in the code if needed but it would be a big change. |
|
Right, and it makes sense since there are some cases where we'd re-use a particular block icon for a non-block action. Group being just one example. Yeah I'll update the figma to use non-prefixed names when I get a chance. I wouldn't mind the icon being renamed "copy". But mostly I just think "Stack" is a great name for the block, and the action. |
|
I pushed the icons change. |
youknowriad
force-pushed
the
add/stack-variation
branch
from
43a4945
to
c4b977b
Compare
|
And with a small apology in advance, I've just updated the icons a little bit 🙈 New row: New stack: |
|
Apology not needed :P |
youknowriad
force-pushed
the
add/stack-variation
branch
from
c4b977b
to
5f29e8d
Compare
| { | ||
| name: 'group-stack', | ||
| title: __( 'Stack' ), | ||
| description: __( 'Blocks stacked in a column.' ), |
There was a problem hiding this comment.
I think this could be improved if it included "vertically" instead of "column" since column is already another block.
|
Does this adress the feedback about the group block variation not being identifiable on the front? |
|
It's worth noting that one unique feature of a vertical flex layout (in comparison to standard Only issue is that there's no way to set a max height for the Group block. The Cover block already has that feature, though. |
These are not different blocks, I understand your feedback but if we want to add a className, it should be
Yeah, seems like we should find a way to expand this control to several blocks |
|
|
|
Not sure what's remaining here. I feel this is ready. I think there are a couple of points that we should look into separately:
|
|
Nice work landing this!
If no-one picks this up in the meantime, I'm happy to look at this when I'm back from AFK next week as it should be a fairly straightforward follow-up to: #39710 by adding the variations to the component there. |
bph
added
the
Needs Dev Note
|
@youknowriad looks like we've been pinged for a dev note on #39654. Here's a quick draft to get that ball rolling, let me know what you think. Stack blockThe new Stack block is a variation of the Group block, and can be thought of as a vertical variant of the Row block. It's a flex container, meaning it has access to content justifications and block spacing. If combined with the Row block and its ability to optionally wrap onto new lines, it can enable basic responsive behaviors, such as two columns that stack to a single column on smaller displays. |
|
I'm not sure why we need a dev note, it's not really targeted for developers. |
I imagine that theme devs will find this far more useful than users. It'd probably be good to let them know about it. It is also possible that theme authors have custom Group block styles that they might want to test against this new variation. |
|
We can use the dev note above, and perhaps this example video showing it in action from the recent 13.0 release notes. |
@jasmussen What FSE theme is that? What's blurred gradient background from? Where can I find it? |
What?
This PR allows switching the "flex" layout orientation in the "row" block. It also adds a new "stack" group block variation for the vertical "flex" layout.
Why?
The "row" name means something horizontal I think so having a dedicated "stack" variation might remove some confusion for users.
#39647 (comment)
Note Right now all the variations (group, row and stack) share the same icon, I'm happy to change it if needed. Happy to tweak the copy of the descriptions as well.
Testing Instructions
1- Insert a row block
2- Switch the "orientation" of the layout to "vertical"
3- Notice that the variation name is now "stack".